<template>
	<div class="box">
		<div id="echarts1"></div>
		<div id="echarts2"></div>
		<div id="echarts3"></div>
		<div id="echarts4"></div>
	</div>
</template>
<script>
export default {
	props: ['props'],
	data() {
		return {
			data: this.props,
			myChart1: null,
			myChart2: null,
			myChart3: null,
			myChart4: null,
			echarts1Arr: [],
			echarts2Arr: [],
			echarts3Arr: [],
			echarts4Arr: [],
			sericedata: [],
			sericedata1: [],
			sericedata2: [],
			sericedata3: [],
			sericedata4: [],
			sericedata5: [],
			sericedata6: [],
			time: null,
			option1: {
				xAxis: {
					type: 'category',
					data: [],
				},

				yAxis: {
					type: 'value',
					interval: 8, //间隔
				},
				title: {
					text: 'CPU使用率(%)',
					subtextStyle: {
						textShadowOffsetX: 100,
						textShadowOffsetY: 100,
					},
				},
				series: [],
			},
			option2: {
				xAxis: {
					type: 'category',
					data: [],
				},
				yAxis: {
					type: 'value',
					interval: 3,
				},
				title: {
					text: '内存使用率(%)',
					subtextStyle: {
						textShadowOffsetX: 100,
						textShadowOffsetY: 100,
					},
				},
				series: [],
			},
			option3: {
				xAxis: {
					type: 'category',
					data: [],
				},
				legend: {
					data: ['运行中', '等待运行', '运行失败'],
				},
				tooltip: {
					trigger: 'axis',
				},
				yAxis: {
					type: 'value',
					interval: 5,
				},
				title: {
					text: '任务监控(个)',
					subtextStyle: {
						textShadowOffsetX: 100,
						textShadowOffsetY: 100,
					},
				},
				series: [],
			},
			option4: {
				xAxis: {
					type: 'category',
					data: [],
				},
				yAxis: {
					type: 'value',
					interval: 0.5,
				},
				legend: {
					data: ['活跃节点'],
				},
				title: {
					text: '节点监控(个)',
					subtextStyle: {
						textShadowOffsetX: 100,
						textShadowOffsetY: 100,
					},
				},
				series: [],
			},
		}
	},

	mounted() {
		setTimeout(() => {
			this.echartsFun()
		}, 100)
		this.time = setInterval(() => {
			this.sericedata = [];
			this.sericedata1 = [];
			this.sericedata2 = [];
			this.sericedata3 = [];
			this.sericedata4 = [];
			this.sericedata5 = [];
			this.sericedata6 = [];
			this.option1.xAxis.data = []
			this.option2.xAxis.data = []
			this.option3.xAxis.data = []
			this.option4.xAxis.data = []
			this.option1.series = []
			this.option2.series = []
			this.option3.series = []
			this.option4.series = []
			this.echartsFun()
		}, 20000)
	},
	beforeDestroy() {
		clearInterval(this.time)
	},
	methods: {
		echartsFun() {
			this.props.map((v, i) => {
				this.option1.xAxis.data.push(this.$moment(new Date(v.recordTime)).format('hh:mm:ss'))
				this.option2.xAxis.data.push(this.$moment(new Date(v.recordTime)).format('hh:mm:ss'))
				this.option3.xAxis.data.push(this.$moment(new Date(v.recordTime)).format('hh:mm:ss'))
				this.option4.xAxis.data.push(this.$moment(new Date(v.recordTime)).format('hh:mm:ss'))

				//cpu
				if (v.cpuUsageRate !== null) {

					this.sericedata4.push(v.cpuUsageRate.split('%')[0])
				}
				this.option1.series.push({
					data: this.sericedata4,
					type: 'line',
					smooth: true,
				})

				// 内存
				if (v.memoryUsageRate !== null) {

					this.sericedata5.push(v.memoryUsageRate.split('%')[0])
				}
				this.option2.series.push({
					data: this.sericedata5,
					type: 'line',

					smooth: true,
				})

				// 任务
				this.sericedata1.push(v.jobMonitorAccepted)
				this.sericedata2.push(v.jobMonitorFailed)
				this.sericedata3.push(v.jobMonitorRun)

				let arr = []
				let arr1 = []
				let arr2 = []
				arr.push({
					data: this.sericedata1,
					type: 'line',
					name: '运行中',
				})
				arr1.push({
					data: this.sericedata3,
					type: 'line',
					name: '等待运行',
				})
				arr2.push({
					data: this.sericedata2,
					type: 'line',
					name: '运行失败',
				})
				let list = []
				arr.map((v, i) => {
					list.push(v)
				})
				arr1.map((v, i) => {
					list.push(v)
				})
				arr2.map((v, i) => {
					list.push(v)
				})

				this.option3.series = list
				// 节点
				this.sericedata6.push(v.nodeMonitor)

				this.option4.series.push({
					data: this.sericedata6,
					type: 'line',
					name: '活跃节点',

					smooth: true,
				})
			})
			console.log(this.option3, 'option3')
			this.myChart1 = this.$echarts.init(document.getElementById('echarts1'))
			this.myChart2 = this.$echarts.init(document.getElementById('echarts2'))
			this.myChart3 = this.$echarts.init(document.getElementById('echarts3'))
			this.myChart4 = this.$echarts.init(document.getElementById('echarts4'))
			this.myChart1.setOption(this.option1, true)
			this.myChart2.setOption(this.option2, true)
			this.myChart3.setOption(this.option3, true)
			this.myChart4.setOption(this.option4, true)
		},
	},
}
</script>
<style scoped>
.box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#echarts1,
#echarts2,
#echarts3,
#echarts4 {
	width: 800px;
	height: 300px;
}
</style>
